<script setup>
import { ref, onMounted,provide } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const stuNo = ref('');
const password = ref('');
const stuName = ref('');
const classNo = ref('');
const router = useRouter();
const currentDate = ref('');
    

// 创建一个登录方法

const login = async()=>{
    try {
        // 发送登录请求
        const response = await axios.post('/api/administrator/login', {
          username: stuNo.value,
          password: password.value,
        });
        if (response.data.code === 1) {
            console.log(response.data)
            window.sessionStorage.setItem('token', response.data.token)
            router.push({name:'ipexp'})
        } else {
          alert(response.data.msg);
        }
      } 
      catch (error) {
        console.error(error);
        // 处理其他错误情况
        alert('登录失败：发生错误');
      }
}

    
const updateDate = () => {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份补零
      const day = String(now.getDate()).padStart(2, '0'); // 天数补零
      currentDate.value = `${year}-${month}-${day}`;
    };

onMounted(() => {
      updateDate(); // 初始化时更新日期
      setInterval(updateDate, 1000); // 每秒更新一次日期
});

provide('userData', { stuNo, stuName, classNo });

</script>

<template>
  <div class="page">
    <div class="fixed ">
        <div class="fixed-box1 fixed-base">
            河北工业大学  数字孪生实验室
        </div>
        <div class="fixed-box2 fixed-base">
          老师，欢迎您
        </div>
        <div class="fixed-box3 fixed-base">
            时间  {{ currentDate }}
        </div>
    </div>
    <div class="container">
        <div class="login-form fixed-base">
            <form @submit.prevent="login" method="POST">
                <div class="form-box1">
                    <div class="lable-first">
                        <label for="username">账号</label>
                    </div>
                    <input type="text" id="username" name="username" placeholder="单行输入" class="input-first" v-model="stuNo">
                </div>
                <div class="form-box2">
                    <div class="lable-last">
                        <label for="password">密码</label>
                    </div>
                    <input type="password" id="password" name="password" placeholder="单行输入" class="input-two" v-model="password">
                </div>
                <div class="form-box3">
                    <input type="submit" value="登录" class="input-last">
                </div>
                
            </form>
        </div>
    </div>
  </div>
</template>

<style scoped>
.page  {
    width: 1440px;
    height: 1024px;
    display: flex;
    flex-direction: column;
}
.fixed {
    height: 102px;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between；  
}
.fixed-base {
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    font-family: 'SimSun', sans-serif; /* 设置字体为宋体，如果系统中没有宋体，将使用默认 sans-serif 字体 */
    font-weight: bolder;
}
.fixed-box1 {
    width: 480px;
    height: 100%;
    font-size: 28px; 
}
.fixed-box2 {
    width: 480px;
    height: 100%;
    font-size: 40px; 
}
.fixed-box3 {
    width: 480px;
    height: 100%;
    font-size: 20px; 
}
.container {
    height: 922px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-image: url('/src/assets/images/baclogo.jpg'); /* 替换为您的图片 URL */
    background-size: cover; /* 图像将被调整大小以覆盖整个 div */
    background-repeat: no-repeat; /* 防止图像重复 */
    background-position: center center; /* 将图像水平和垂直居中 */
    z-index: 1; /* 将叠加层置于内容之上 */
}
.container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgb(123, 182, 237,0.6); /* 蓝色背景，透明度 0.5，可以根据需要调整颜色和透明度 */
    z-index: -1; /* 将叠加层置于内容之下 */
}
.login-form {
    width: 560px;
    height: 410px;
    opacity: 0.8;
    background-color: whitesmoke;
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    font-family: 'SimSun', sans-serif; /* 设置字体为宋体，如果系统中没有宋体，将使用默认 sans-serif 字体 */
}
.form-box1 {
    height: 150px;
    width: 560px;
}
.form-box2 {
    height: 120px;
    width: 560px;
}
.form-box3 {
    height: 140px;
    width: 560px;
}
input{
	border: none;
	box-shadow:none;
	outline: none;
    width: 215px;
    height: 50px;
    font-size: 14px;
    padding: 5px;
}
.input-first {
    margin-left: 70px;
    margin-top: 85px;
    font-weight: bolder;
}
.input-two {
    margin-left: 70px;
    margin-top: 30px;
    font-weight: bolder;
}
.input-last {
    width: 140px;
    height: 75px;
    font-size: 28px;
    margin-left: 210px;
    margin-top: 20px;
}
.lable-first {
    float: left;
    margin-top: 88px;
    margin-left: 70px;
    font-size: 35px;
}
.lable-last {
    float: left;
    margin-top: 30px;
    margin-left: 70px;
    font-size: 35px;
}
</style>
